<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text.css">
            #box{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <h1>jQueryDOM 与 JSDOM 的区别 以及相互转化</h1>
    <hr>

    <div id="box"></div>

    <img src="./1.jpg" width="50" id="myimg">

    
    <script src="./jquery-3.3.1.min.js"></script>
    <script>
        var box = document.getElementById('box'); // JS DOM
        var $box = $('#box'); // JQ DOM

        console.dir(box);
        console.dir($box);

        // 改变box css样式
        box.style.backgroundColor = '#ccc'; // YES
        // $box.style.backgroundColor = '#369'; // NO

        $box.css('background-color', '#369'); // YES
        // box.css('background-color', '#369'); // NO

        myimg.width = 600;
        // $('#myimg').width = 300;
        $('#myimg').attr('width', 300);

        // 转化   JSDOM  -> JQDOM
        $(box).css('background-color', '#ff0'); // YES

        // 转化   JQDOM  -> JSDOM
        // console.log($box[0]);
        $box[0].style.backgroundColor = '#0ff'; // YES
        $box.get(0).style.backgroundColor = '#0a0'; // YES

        var $ = '静静';
        // $('h1').css('color', '#f00');
        jQuery('h1').css('color', '#f00');


    </script>



</body>
</html>







